---
title: Personnaliser le nom des fichiers dans la sortie de compilation
description: Découvrez comment modifier le modèle de nommage par défaut de vos ressources générées avec Astro telles que JavaScript, CSS et les images à l'aide des options Rollup de Vite.
i18nReady: true
type: recipe
---
import { Steps } from '@astrojs/starlight/components';
import { FileTree } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Par défaut, la commande `astro build` génère vos ressources générées à partir de [la source de votre projet](/fr/basics/project-structure/#src), comme les fichiers JavaScript et CSS situés dans le répertoire `src/`, dans un répertoire `_astro` avec des noms de fichiers hachés (par exemple `_astro/index.DRf8L97S.js`) qui sont excellents pour la mise en cache à long terme.

Bien que cela ne soit normalement pas nécessaire, vous pouvez personnaliser les noms des fichiers de sortie si nécessaire. Par exemple, cela peut être utile si vous avez des scripts dont les noms peuvent déclencher des bloqueurs de publicités (par exemple, `ads.js`) ou si vous souhaitez organiser vos ressources selon une convention de nommage particulière. En personnalisant les options de sortie de Rollup, vous bénéficiez d'un meilleur contrôle sur la structure compilée de votre projet, vous permettant ainsi de répondre à des exigences organisationnelles ou de déploiement spécifiques.

## Recette

Cette recette configure `vite.build.rollupOptions` pour générer des ressources compilées avec la structure et le modèle de nommage suivants :
-   Fichiers d'entrée JavaScript (par exemple, scripts directement associés à vos pages ou mises en page) : `dist/js/[name]-[hash].js`
-   Morceaux de code JavaScript (par exemple, composants importés dynamiquement ou modules partagés) : `dist/js/chunks/[name]-[hash].js`
-   Autres ressources (par exemple, CSS, images, polices) : `dist/static/[name]-[hash][extname]` (par exemple, `dist/static/styles-a1b2c3d4.css`, `dist/static/logo-e5f6g7h8.svg`)

<Steps>

1.  Ajoutez les options de sortie Rollup de Vite.

    Modifiez votre fichier `astro.config.mjs` pour inclure la configuration `vite.build.rollupOptions.output` suivante. C'est ici que vous pouvez définir les modèles de nommage personnalisés pour vos ressources à l'aide des propriétés [`entryFileNames`](https://rollupjs.org/configuration-options/#output-entryfilenames), [`chunkFileNames`](https://rollupjs.org/configuration-options/#output-chunkfilenames) et [`assetFileNames`](https://rollupjs.org/configuration-options/#output-assetfilenames) de Rollup :

    ```javascript title="astro.config.mjs" ins
    import { defineConfig } from 'astro/config';

    export default defineConfig({
      // ...
      vite: {
        build: {
          rollupOptions: {
            output: {
              // chemin relatifs à `outDir`
              entryFileNames: 'js/[name]-[hash].js',
              chunkFileNames: 'js/chunks/[name]-[hash].js',
              assetFileNames: 'static/[name]-[hash][extname]',
            },
          },
        },
      },
    });
    ```

    Cet exemple utilise les paramètres substituables de noms de fichiers suivants :
    *   `[name]` : Le nom d'origine du fichier (sans l'extension et le chemin).
    *   `[hash]` : Un hachage basé sur le contenu généré pour le fichier, essentiel pour contourner le cache. Vous pouvez également spécifier une longueur, par exemple `[hash:8]`. Cela garantit que lorsque vous mettez à jour un élément, le nom du fichier change, obligeant les navigateurs à télécharger la nouvelle version au lieu de diffuser une version en cache obsolète.
    *   `[extname]` : L'extension du fichier d'origine, incluant le point initial (par exemple `.js`, `.css`, `.svg`).

    <ReadMore>
    Pour une liste complète des paramètres substituables et des modèles avancés disponibles pour ces options, reportez-vous à la [documentation de configuration Rollup](https://rollupjs.org/configuration-options/).
    </ReadMore>

2.  Compilez votre projet.

    Étant donné que ces personnalisations de nom de fichier s'appliquent uniquement à la sortie de compilation pour la production, vous devrez exécuter la commande de compilation de votre projet :

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run build
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm build
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn build
      ```
      </Fragment>
    </PackageManagerTabs>

3. Une fois la compilation terminée, inspectez votre [répertoire de sortie](/fr/reference/configuration-reference/#outdir) (`dist/` par défaut).

    Vérifiez que les ressources générées depuis le dossier `src` votre projet sont nommées et organisées selon les nouveaux modèles. (Les fichiers de [votre répertoire `public/`](/fr/basics/project-structure/#public) sont copiés directement dans le répertoire de sortie et ne sont pas affectés par les options de nommage de Rollup.)

    En fonction du contenu spécifique de votre projet, votre dossier de compilation ressemblera désormais à ceci :

    <FileTree>
    - dist/
      - js/
        - index-a1b2c3d4.js
        - chunks/
          - common-e5f6g7h8.js
      - img/
        - logo-i9j0k1l2.png
      - fonts/
        - myfont-q2w3e4r5.woff2
      - static_assets/
        - styles-m3n4o5p6.css
      - index.html
      - about/
        - index.html
      - ... (autres fichiers HTML et ressources publiques)
    </FileTree>

</Steps>
